<template>
  <div>
    <!-- 1 -->
    <div class="d1">
      <div v-for="(item,index) in newtext1" :key="index">
        <div><img :src="item.src1" alt="" class="i1"></div>
        <div>{{item.text1}}</div>
      </div>
    </div>
    <!-- 2 -->
    <div class="d2">
      <div class="d3" v-for="(item,index) in newtext2" :key="index">
        <div class="d2-1"><div><img :src="item.src" alt=""></div></div>
        <div class="d2-2"><p>{{item.text1}}</p><span>{{item.text2}}</span></div>
        <div class="d2-3">{{item.time}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {

    }
  },
  methods:{

  },
  computed:{
    newtext1(){
      return this.$store.state.xiaoxi.text1
    },
    newtext2(){
      return this.$store.state.xiaoxi.text2
    }
  },
  created(){
    return this.$store.dispatch("xiaoxiH",{url:"xiaoxi"})
  }
}
</script>

<style scoped>
  .i1{
    width: .4rem;
  }
  .d1>div>div{
    text-align: center;
  }
  .d1>div{
    width: 20%;
  }
  .d1{
    display: flex;
    justify-content: space-around;
    padding: .12rem 0;
    box-sizing: border-box;
    border-bottom: .06rem solid rgba(0, 0, 0, 0.13);
  }
  .d2{
    height: 0.8rem;
  }
  .d2-1,.d2-3{
    width: 20%;
    /* background-color: pink; */
  }
  .d2-1{
  display: flex;
  }
  .d2-1>div{
  border-radius: 50%;
  width: .6rem;
  height: .6rem;
  overflow: hidden;
  margin: auto;
  }
  .d2-1>div>img{
    width: 100%;
  }
  .d2-2{
    width: 60%;
    padding: .1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    /* background-color: red; */
  }
  .d2-3{
    padding: .1rem;
  }
  .d3{
    height: 100%;
    display: flex;
    border-bottom: .01rem solid rgba(0, 0, 0, 0.13);
  }
</style>